import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaTableEdit , WeaSearchGroup , WeaTable,WeaLocaleProvider} from 'ecCom';
import { Table , Button ,Icon ,Modal} from 'antd';
import AddCountProDialog from './AddCountProDialog';//新建统计项目弹出框
import * as mobx from 'mobx';
const getLabel = WeaLocaleProvider.getLabel;

 
@inject('wfCusReportAddStore')
  
@observer
export default class AddByGroup extends React.Component{
    constructor(props){
        super(props);
        this.state={
        }
    }
    doDelete=()=>{
        const { wfCusReportAddStore } =this.props;
        const { proJectDataSource  , setDataSource , proJectRowKeys} = wfCusReportAddStore;
        Modal.confirm({
            content:getLabel(385322,' 你确定要删除选中的记录吗? ') ,
            onOk() {
                let _datas = [].concat(proJectDataSource.slice());
                let deleteIds = [];
                proJectRowKeys.map(key => {
                    _datas = _datas.filter(data => data.key !== key);

                });
                setDataSource(_datas,proJectRowKeys);
            },
            onCancel() {},
        });
    }
    doCopy=()=>{
        const { wfCusReportAddStore } =this.props;
        const { proJectDataSource, setDataSource, proJectRowKeys } = wfCusReportAddStore;
        

        Modal.confirm({
            content:getLabel(386253,' 是否要复制选中数据？') ,
            onOk() {
                let _datas = [].concat(proJectDataSource.slice());
                proJectRowKeys.map(key => {
                    proJectDataSource.map(data => {
                        if(data.key == key){
                            let _data = {...data};
                            _data.id&&delete _data.id;//复制出的id需要删除掉
                            _data.key = _datas.length;
                            _datas.push(_data)
                        }
                    })
                });
                setDataSource(_datas)
                // this.onChange(_datas);
            },
            onCancel() {},
        });
        
    }
    
    componentDidMount() {
        const {wfCusReportAddStore} = this.props;
        const { initDatasSteps,proJectFlag,formulaInfo} = wfCusReportAddStore;
        formulaInfo.slice().length==0&&initDatasSteps({step:3});
    }
    render(){
        const { wfCusReportAddStore } =this.props;
        const { proJectDataSource , setProJectRowKeys ,proJectAddModalShow ,proJectRowClick ,proJectRowKeys} = wfCusReportAddStore;
        const proJectColumns = [{
            title: getLabel(386302,'统计项目名称'),
            dataIndex: 'lanName',
            key: 'lanName',
            sorter: true
        },{
            title: getLabel(386271,'公式'),
            dataIndex: 'formulaDesc',
            key: 'formulaDesc',
            sorter: true
        }];

        const rowSelection = {
            onChange(selectedRowKeys, selectedRows) {
                setProJectRowKeys(selectedRowKeys);
            },
            selectedRowKeys:proJectRowKeys
        };
        return(
            <div className="wf-backstage-add-bygroup" >
                <AddCountProDialog ecId={`${this && this.props && this.props.ecId || ''}_AddCountProDialog@8z7uuc`} />
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ni4frl`} 
                    title={getLabel(386254,"统计项目列表")}
                    customComponent={this.getButtons()}
                    showGroup={true}> 
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@t00qkx`} 
                        columns={proJectColumns.slice()} 
                        dataSource={proJectDataSource.slice()} 
                        draggable={true} 
                        rowSelection={rowSelection}
                        onRowClick={(record,index)=>{
                            proJectRowClick({
                                formulaName:record.name.props.children,
                                formulaDesc:record.formulaDesc.props.children,
                                formulaKey:record.key,
                                formula:record.formula.props.children
                            });
                        }}
                        onDrop={this.doDragRow.bind(this)}
                        pagination={false}/>
                </WeaSearchGroup> 
            </div>  
        )
    }
    getButtons=()=>{
        const { wfCusReportAddStore } =this.props;
        const { proJectRowKeys , setProJectAddModalShow} = wfCusReportAddStore;
        return (
            <div className="actionBtns">
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1gs7re`} 
                    style={{
                        border:'none',padding:'0px',fontSize:'20px',lineHeight:'1',color: '#108ee9',backgroundColor:'#fff',marginLeft:'10px',
                    }} 
                    type="primary" 
                    title={getLabel(611,'添加')} 
                    size="small" disabled={0} 
                    onClick={()=>setProJectAddModalShow(true)}><span className="icon-coms-Add-to-hot"/>
                </Button>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@87lm3q`} title={getLabel(126371,'删除')} disabled={proJectRowKeys.slice().length==0}
                        style={{
                            border:'none',padding:'0px',fontSize:'20px',lineHeight:'1',
                            color: proJectRowKeys.slice().length>0 ? '#108ee9':'#d6d6d6',marginLeft:'10px',backgroundColor: '#fff'
                        }} 
                    onClick={()=>{
                        if(proJectRowKeys.slice().length>0){
                            this.doDelete();
                        }
                    }} >
                    <span className="icon-coms-form-delete-hot"/>
                </Button>
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@q0vxs1`} title={getLabel(383528,'复制')} disabled={proJectRowKeys.slice().length==0}
                        style={{
                            border:'none',padding:'0px',fontSize:'20px',lineHeight:'1',
                            color: proJectRowKeys.slice().length>0 ? '#108ee9':'#d6d6d6',marginLeft:'10px',backgroundColor: '#fff'
                        }} 
                    onClick={()=>{
                        if(proJectRowKeys.slice().length>0){
                            this.doCopy();
                        }
                    }} >
                    <span className="icon-coms-copy-hot"/>
                </Button>
            </div>
        );
    }

    doDragRow(datas){
        const {saveformulaListIndex} = this.props.wfCusReportAddStore;
        saveformulaListIndex(datas);
    }
}
